<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Button Effect</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>

  <style>
    .my-block {
      position: relative;
      background: blue;
      color: white;
      width: 300px;
      height: 100px;
      margin: 1rem;
    }
  </style>
</head>
<body>
  <ion-app>

        <ion-header>
          <ion-toolbar>
            <ion-title>Button Effect</ion-title>
          </ion-toolbar>
        </ion-header>

        <ion-content padding no-bounce>
          <p>
            <ion-button size="small">Small</ion-button>
          </p>
          <p>
            <ion-button size="large">Large</ion-button>
          </p>
          <p>
            <ion-button size="large" fill="outline">Large</ion-button>
          </p>
          <p>
            <ion-button size="large" fill="clear">Large</ion-button>
          </p>
          <div class="my-block">
            <ion-ripple-effect></ion-ripple-effect>
            This is just a div + effect behind
            <ion-button onclick="buttonClicked()">Nested button</ion-button>
          </div>
          <div class="my-block">
            This is just a div + effect on top
            <ion-button onclick="buttonClicked()">Nested button</ion-button>
            <ion-ripple-effect></ion-ripple-effect>
          </div>

          <div class="my-block">
            This is just a div + effect
            <ion-ripple-effect></ion-ripple-effect>
          </div>
        </ion-content>

  </ion-app>
  <script>
    function blockClicked() {
      console.log('block clicked');
      return true;
    }
    function buttonClicked() {
      console.log('button clicked');
    }
  </script>
</body>
</html>
